<template>
  <div class="weatherContainer">
    <div class="searchBox">
      <input
        v-model="city"
        @keyup.enter="getWeather"
        placeholder="请输入城市名称"
        class="searchInput"
      />
      <button @click="getWeather" class="searchBtn">搜索</button>
    </div>

    <div v-if="suggestions.length" class="suggestions">
      <span
        v-for="item in suggestions"
        :key="item"
        @click="selectCity(item)"
        class="suggestionItem"
      >
        {{ item }}
      </span>
    </div>

    <div v-if="loading" class="loading">加载中...</div>

    <div v-if="error" class="error">{{ error }}</div>

    <div v-if="weatherData.length" class="weatherList">
      <div v-for="day in weatherData" :key="day" class="weatherCard">
        <div class="date">{{ day.date }}</div>
        <div class="weatherInfo">
          <div class="temp">
            <span class="high">{{ day.tem1 }}°C</span>
            <span class="low">{{ day.tem2 }}°C</span>
          </div>
          <div class="weather">{{ day.wea }}</div>
          <div class="wind">{{ day.win }}{{ day.win_speed }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      city: "",
      weatherData: [],
      suggestions: ["北京", "上海", "广州", "深圳", "杭州", "成都"],
      loading: false,
      error: "",
    };
  },
  methods: {
    getWeather() {
      if (!this.city.trim()) {
        this.error = "请输入城市名称";
        return;
      }

      this.loading = true;
      this.error = "";
      this.weatherData = [];

      axios
        .get("http://gfeljm.tianqiapi.com/api", {
          params: {
            version: "v9",
            appid: "58315789",
            appsecret: "1jDXZCif",
            city: this.city,
          },
        })
        .then((response) => {
          if (response.data.data) {
            this.weatherData = response.data.data;
          } else {
            this.error = "未获取到天气数据";
          }
        })
        .catch((error) => {
          this.error = "获取天气数据失败，请稍后重试";
          console.error("获取天气数据失败:", error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    selectCity(city) {
      this.city = city;
      this.getWeather();
    },
  },
};
</script>

<style scoped>
.weatherContainer {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.searchBox {
  display: flex;
  margin-bottom: 20px;
}

.searchInput {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
}

.searchBtn {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 16px;
}

.searchBtn:hover {
  background-color: #45a049;
}

.suggestions {
  margin-bottom: 20px;
}

.suggestionItem {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.suggestionItem:hover {
  background-color: #f5f5f5;
}

.weatherList {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.weatherCard {
  width: 190px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}

.date {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.weatherInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.temp {
  display: flex;
  justify-content: space-between;
}

.high {
  color: #e74c3c;
}

.low {
  color: #3498db;
}

.weather {
  font-size: 18px;
}

.wind {
  font-size: 14px;
  color: #666;
}

.loading,
.error {
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.error {
  color: #e74c3c;
}
</style>